;(function () {
    var options = {
    };
    var pieces = Array();
    $(function () {
        initEvent();
    });


    function initEvent() {
        roll();
        showMap();
        getComBar();
        getCompCountByRegion()
    }

    function roll(){
        $(".plate4Tab").on("click", "li", function () {
            var $index = $(this).index();
            $(this).addClass("active").siblings().removeClass("active");
            $(".plate4Box>section").hide();
            $(".plate4Box>section").eq($index).show().siblings().hide();
            if ($index == 0) {
                getComBar();
                getCompCountByRegion();
            } else if ($index == 1) {
                getPie();
                getPersonBar();
            } else if ($index == 2) {
                getProjectBar();
                getCountByRegion();
            }
        });
    }


    function getCompCountByRegion() {
        $.get("https://www.easy-mock.com/mock/5d281cc85296dd579b13b342/webstie/getCompNumByArea", {}, function (data) {
            console.log(data)
            var data = data.obj;
            var datalist = new Array();
            $.each(data, function (index, item) {
                var i = {};
                i["value1"] = '建筑业企业：' + item.jzy + '家</br>勘察企业：' + item.kc + '家</br>设计企业：' + item.sj + '家</br>监理企业：' + item.jl + '家</br>质量检测企业：' + item.zljc + '家</br>造价咨询企业：' + item.zjzx + '家';
                i["name"] = item.regionName;
                i["value"] = Number(item.jzy) + Number(item.kc) + Number(item.sj) + Number(item.jl) + Number(item.zljc) + Number(item.zjzx);
                datalist.push(i);
            });
            pieces = [
                {gte: 3000, color: '#3284ff'},
                {gte: 2000, lt: 3000, color: '#669dec'},
                {gte: 1000, lt: 2000, color: '#96bcf2'},
                {gte: 500, lt: 1000, color: '#cbdef8'},
                {lt: 500, color: '#eef0fd'}
            ];
            showMap(datalist);
        });
    }

    function getCountByRegion() {
        $.get("https://www.easy-mock.com/mock/5d281cc85296dd579b13b342/webstie/getCountByRegion", {}, function (data) {
            var data = data.obj;
            var datalist = new Array();
            $.each(data, function (index, item) {
                var i = {};
                i["value1"] = '注册人员：' + item.zc + '人</br>岗位人员：' + item.gw + '人</br>安管人员：' + item.ag + '人</br>特种人员：' + item.tz + '人</br>技术工人：' + item.js + '人</br>职称人员：' + item.zcr + '人';
                i["name"] = item.regionName;
                i["value"] = Number(item.zc) + Number(item.gw) + Number(item.ag) + Number(item.tz) + Number(item.js) + Number(item.zcr);
                datalist.push(i);
            });

            pieces = [
                {gte: 50000, color: '#3284ff'},
                {gte: 25000, lt: 50000, color: '#669dec'},
                {gte: 10000, lt: 25000, color: '#96bcf2'},
                {gte: 500, lt: 10000, color: '#cbdef8'},
                {lt: 5000, color: '#eef0fd'}
            ];
            showMap(datalist);
        });
    }

    function showMap(data) {
        // console.log(data)
        var myChart1 = echarts.init(document.getElementById("map1"));
        var myChart6 = echarts.init(document.getElementById("map2"));
        $.get('/webstie/assets/js/data-jiangxi.json ', function (geoJson) {
            echarts.registerMap('jiangxi', geoJson);
            option = {
                tooltip: {
                    trigger: 'item',
                    formatter: function (params) {
                        var s = "";
                        var myseries = option.series;
                        for (i in myseries) {
                            for (var j = 0; j < myseries[i].data.length; j++) {
                                if (myseries[i].data[j].name == params.name) {
                                    s += myseries[i].data[j].name + '</br>' + myseries[i].data[j].value1 + '</br>';
                                }
                            }
                        }
                        return s;
                    }
                },
                visualMap: {
                    type: 'piecewise',
                    pieces: pieces,
                    right: '1%'
                },
                series: [
                    {
                        name: '',
                        type: 'map',
                        mapType: 'jiangxi', // 自定义扩展图表类型
                        itemStyle: {
                            normal: {label: {show: true}},
                            emphasis: {label: {show: true}, color: '#fce15c'},
                        },
                        data: data

                    }
                ]
            };
            myChart1.setOption(option)
            myChart6.setOption(option)
        });

    }

    function getPie() {
        var uploadedDataURL = "/webstie/assets/images/centerPie.png";

        var colorList = ['#F04864', '#216DE5'];
        var sportsIcon = {
            'a': "/webstie/assets/images/centerPie.png",
        };
        option = {
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                // orient: 'vertical',
                x: 'center',
                y:'bottom',
                data: ['男', '女'],
                icon:'circle',
                itemGap: 20,
                textStyle:{
                    padding:[2,0,0,0]
                }
            },
            grid: {
                top:30,
                bottom: 30,
                left:100,
                right: 100
            },
            series: [
                // 主要展示层的
                {
                    name: '男女比例分析',
                    radius: '50%',
                    center: ['50%', '50%'],
                    type: 'pie',
                    itemStyle: {
                        normal: {
                            color: function(params) {
                                return colorList[params.dataIndex]
                            }
                        }
                    },
                    labelLine: {
                        normal: {
                            show: true,
                            length: 25,
                            length2: 0,
                            lineStyle: {
                                // color: '#f00'
                            },
                            align: 'right'
                        },
                        color: "#1890ff",
                        emphasis: {
                            show: true
                        }
                    },
                    label: {
                        normal: {
                            formatter: function(params) {
                                var str = '';
                                switch (params.name) {
                                    case '男':
                                        str = '{a|}\n{nameStyle|男 }';
                                        break;
                                    case '女':
                                        str = '{b|}\n{nameStyle|女 }';
                                        break;

                                }
                                return str
                            },
                            rich: {
                                a: {
                                    width: 30,
                                    height: 30,
                                    lineHeight: 40,
                                    backgroundColor: {
                                        image: sportsIcon.a
                                    },
                                    align: 'center',
                                },
                                b: {
                                    width: 30,
                                    height: 30,
                                    lineHeight: 40,
                                    backgroundColor: {
                                        image: sportsIcon.a
                                    },
                                    align: 'center',
                                },
                                nameStyle:{
                                    color:'#1890ff',
                                    align: 'center',
                                    padding:[0,0,0,5]
                                }
                            }
                        }
                    },
                    data: [{
                        value: 17,
                        name: '男',
                    },
                        {
                            value: 23,
                            name: '女'
                        }
                    ],
                },

            ]
        };

        var myChart3 = echarts.init(document.getElementById("pie1"));
        myChart3.setOption(option)
    }

    function showBar() {
        option = {
            color: ['#3AA1FF'],
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                },
                formatter: "{b}  : {c}人"
            },
            grid: {
                left: '5%',
                right: '5%',
                bottom: '2%',
                containLabel: true
            },
            xAxis: {
                type: 'value',
                // boundaryGap: [0, 0.0001],
                axisLabel: {
                    formatter: '{value}',
                    textStyle: {
                        color: '#9E9E9E',
                        fontWeight: '80'
                    }
                },
                axisLine:{
                    show:false
                },
                axisTick:{
                    show:false
                },
                splitLine:{
                    show: true,
                    // interval: 'auto',
                    lineStyle:{
                        color: ['#eee'],
                        width: 1,
                        type:'dashed'
                    }
                }
            },
            yAxis: {
                type: 'category',
                data: ['二级建造师', '一级建造师', '二级建筑师', '造价工程师', '监理工程师', '一级结构师', '化工工程师', '电器工程师', '土木工程师'],
                axisLabel: {
                    show: true,
                    rotate: 0,
                    margin: 10,
                    inside: false,
                    textStyle: {
                        color: '#9E9E9E',
                        fontWeight: '50'
                    }
                },
                axisLine:{
                    show:false
                },
                axisTick:{
                    show:false
                },
            },
            series: [{
                type: 'bar',
                barMaxWidth:25,
                label: {
                    normal: {
                        show: true,
                        position:'right',
                        formatter: function(v) {
                            var val = v.data;
                            if (val == 0) {
                                return '';
                            }
                            return val;
                        },
                        color: '#9E9E9E'
                    }
                },
                data: [122, 133, 441, 515, 661, 771, 818,1122,1122]
            }]
        };
    }

    function getComBar() {
        showBar()
        var myChart1 = echarts.init(document.getElementById("bar1"));
        myChart1.setOption(option)
    }

    function getPersonBar() {
        showBar()
        var myChart4 = echarts.init(document.getElementById("bar2"));
        myChart4.setOption(option)
    }

    function getProjectBar(){
        var data = [10, 20, 40, 60, 80, 100, 120, 100];
        option = {
            color: ['#3AA1FF'],
            tooltip: {
                trigger: 'axis',
                axisPointer: { // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                top: '15%',
                containLabel: true,

            },
            xAxis: [{
                type: 'category',
                data: [],

                axisTick: {
                    alignWithLabel: true,
                    show: false,
                },
                axisLine: {
                    show: false
                },
                axisLabel: {
                    textStyle: {
                        color: '#01a3d8'
                    }
                }
            }],
            yAxis: {
                boundaryGap: [0, 0.1],
                axisLine: {
                    show: false,
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    textStyle: {
                        color: '#9E9E9E'
                    }
                },
                splitLine: { //保留网格线
                    show: true,
                    lineStyle: { //y轴网格线设置
                        color: '#EEEEEE',
                        width: 1,
                        type: 'dashed'
                    }
                },
            },
            series: [{ // For shadow
                type: 'bar',
                barMaxWidth:25,
                barCategoryGap: '40%',
                data: data,
                animation: false
            }]
        };
        var myChart5 = echarts.init(document.getElementById("bar3"));
        myChart5.setOption(option)
    }
})(jQuery);

